<template>
	<uni-popup
		class="popup"
		ref="popup"
		type="bottom"
		mask-background-color="rgba(0,0,0,0.6)"
		:safe-area="false"
		:mask-click="false"
		:is-mask-click="false"
	>
		<view class="selection_wrap">
			<view class="header">
				<uni-icons color="black" size="28" type="settings-filled" />
				藏品属性
			</view>
			<scroll-view scroll-y class="selection_main">
				<checkbox-group @change="handleCheckGroup">
					<u-collapse>
						<u-collapse-item
							v-for="(item, index) in list"
							:key="index"
							:expandedDirection="['right', 'down']"
							:rightIconStyle="{
								color: selectedColor(item.index),
							}"
						>
							<view slot="title" class="title">
								<text :style="{ color: selectedColor(item.index, 'black') }">{{ item.name }}</text>
								<text :style="{ color: selectedColor(item.index) }">{{ item.nfts.length }}</text>
							</view>
							<scroll-view scroll-y class="item_scroll">
								<view v-for="nft in item.nfts" :key="nft.idx" class="item" :style="{ backgroundColor: hasSelected(nft.key) }">
									<checkbox :value="nft.key" :checked="nft.check" activeBackgroundColor="#1952F8" activeBorderColor="#1952F8" iconColor="white" />
									{{ nft.name }}
									<view class="per">{{ (nft.per * 100).toFixed(2) }}%</view>
								</view>
							</scroll-view>
						</u-collapse-item>
					</u-collapse>
				</checkbox-group>
			</scroll-view>
			<view class="operation">
				<view class="clear" :class="{ selected: selectCounts }" @click="clearSelection">清空</view>
				<view class="select" @click="emitSelection"
					>筛选 <view v-if="selectCounts" class="tag">{{ selectCounts }}</view></view
				>
			</view>
		</view>
	</uni-popup>
</template>
<script>
export default {
	props: {
		value: Boolean,
		data: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			popup: null,
			list: [],
			selected: [],
		};
	},

	computed: {
		selectedColor() {
			return (index, defaultColor = "#999999", activeColor = "#1952F8") => {
				const has = this.selected.some((item) => {
					return item.indexOf(`${index}-`) > -1;
				});
				return has ? activeColor : defaultColor;
			};
		},

		hasSelected() {
			return (value) => (this.selected.includes(value) ? "rgba(25, 81, 248, 0.1)" : "transparent");
		},

		selectCounts() {
			if (this.selected.length) return this.selected.length;
			return "";
		},
	},

	watch: {
		value(val) {
			if (this.popup) {
				if (val) {
					this.popup.open();
					this.dealWithData();
				} else {
					this.popup.close();
				}
			}
		},
	},

	mounted() {
		this.$nextTick(() => {
			this.popup = this.$refs.popup;
			this.getList();
		});
	},

	methods: {
		getList() {
			this.list = [
				{
					name: "头部",
					index: 1,
					nfts: [
						{
							check: false,
							key: "1-2",
							name: "头部2",
							per: 0.14036370655521657,
						},
						{
							check: false,
							key: "1-4",
							name: "头部4",
							per: 0.589199386883105,
						},
						{
							check: false,
							key: "1-3",
							name: "头部3",
							per: 0.663788730002124,
						},
						{
							check: false,
							key: "1-1",
							name: "头部1",
							per: 0.7913481966890555,
						},
						{
							check: false,
							key: "1-0",
							name: "头部0",
							per: 0.9126475142331631,
						},
					],
				},
				{
					name: "脸部",
					index: 2,
					nfts: [
						{
							check: false,
							key: "2-14",
							name: "脸部14",
							per: 0.0310618195254162,
						},
						{
							check: false,
							key: "2-8",
							name: "脸部8",
							per: 0.032169319327823964,
						},
						{
							check: false,
							key: "2-6",
							name: "脸部6",
							per: 0.07371943804140357,
						},
						{
							check: false,
							key: "2-1",
							name: "脸部1",
							per: 0.1976517731551024,
						},
						{
							check: false,
							key: "2-2",
							name: "脸部2",
							per: 0.2640364811726179,
						},
						{
							check: false,
							key: "2-3",
							name: "脸部3",
							per: 0.3131217704341347,
						},
						{
							check: false,
							key: "2-12",
							name: "脸部12",
							per: 0.39803262060648714,
						},
						{
							check: false,
							key: "2-0",
							name: "脸部0",
							per: 0.47756439958854635,
						},
						{
							check: false,
							key: "2-5",
							name: "脸部5",
							per: 0.5508169081436693,
						},
						{
							check: false,
							key: "2-10",
							name: "脸部10",
							per: 0.5948049046648898,
						},
						{
							check: false,
							key: "2-4",
							name: "脸部4",
							per: 0.6362911207953701,
						},
						{
							check: false,
							key: "2-7",
							name: "脸部7",
							per: 0.6397340797974199,
						},
						{
							check: false,
							key: "2-13",
							name: "脸部13",
							per: 0.8093386427978989,
						},
						{
							check: false,
							key: "2-9",
							name: "脸部9",
							per: 0.8170256696778669,
						},
						{
							check: false,
							key: "2-11",
							name: "脸部11",
							per: 0.830484356322633,
						},
					],
				},
				{
					name: "身体",
					index: 3,
					nfts: [
						{
							check: false,
							key: "3-18",
							name: "身体18",
							per: 0.0029564931129403282,
						},
						{
							check: false,
							key: "3-88",
							name: "身体88",
							per: 0.006556831606421953,
						},
						{
							check: false,
							key: "3-145",
							name: "身体145",
							per: 0.029431565855242647,
						},
						{
							check: false,
							key: "3-50",
							name: "身体50",
							per: 0.03602918893941176,
						},
						{
							check: false,
							key: "3-42",
							name: "身体42",
							per: 0.03623573542415004,
						},
						{
							check: false,
							key: "3-138",
							name: "身体138",
							per: 0.041333458966656744,
						},
						{
							check: false,
							key: "3-127",
							name: "身体127",
							per: 0.04157790019255592,
						},
						{
							check: false,
							key: "3-36",
							name: "身体36",
							per: 0.045575149766283185,
						},
						{
							check: false,
							key: "3-96",
							name: "身体96",
							per: 0.045630154173924686,
						},
						{
							check: false,
							key: "3-74",
							name: "身体74",
							per: 0.05085017952741111,
						},
						{
							check: false,
							key: "3-79",
							name: "身体79",
							per: 0.0536220663883632,
						},
						{
							check: false,
							key: "3-137",
							name: "身体137",
							per: 0.053928405375910704,
						},
						{
							check: false,
							key: "3-44",
							name: "身体44",
							per: 0.05511155583003846,
						},
						{
							check: false,
							key: "3-55",
							name: "身体55",
							per: 0.05997614691663289,
						},
						{
							check: false,
							key: "3-24",
							name: "身体24",
							per: 0.06020533335413847,
						},
						{
							check: false,
							key: "3-140",
							name: "身体140",
							per: 0.06189407494464627,
						},
						{
							check: false,
							key: "3-25",
							name: "身体25",
							per: 0.0759330298458244,
						},
						{
							check: false,
							key: "3-40",
							name: "身体40",
							per: 0.07944819985642337,
						},
						{
							check: false,
							key: "3-132",
							name: "身体132",
							per: 0.08400140865788552,
						},
						{
							check: false,
							key: "3-15",
							name: "身体15",
							per: 0.09212727610126137,
						},
						{
							check: false,
							key: "3-38",
							name: "身体38",
							per: 0.10938905021284484,
						},
						{
							check: false,
							key: "3-76",
							name: "身体76",
							per: 0.12788087770866896,
						},
						{
							check: false,
							key: "3-6",
							name: "身体6",
							per: 0.13398042931344978,
						},
						{
							check: false,
							key: "3-100",
							name: "身体100",
							per: 0.13490807528677928,
						},
						{
							check: false,
							key: "3-134",
							name: "身体134",
							per: 0.1377651161986212,
						},
						{
							check: false,
							key: "3-101",
							name: "身体101",
							per: 0.1459571971992063,
						},
						{
							check: false,
							key: "3-80",
							name: "身体80",
							per: 0.1471972366419656,
						},
						{
							check: false,
							key: "3-19",
							name: "身体19",
							per: 0.1503053242452005,
						},
						{
							check: false,
							key: "3-77",
							name: "身体77",
							per: 0.15462739108309376,
						},
						{
							check: false,
							key: "3-142",
							name: "身体142",
							per: 0.16235923174333677,
						},
						{
							check: false,
							key: "3-109",
							name: "身体109",
							per: 0.16264149784497994,
						},
						{
							check: false,
							key: "3-85",
							name: "身体85",
							per: 0.1711548026698534,
						},
						{
							check: false,
							key: "3-66",
							name: "身体66",
							per: 0.18871351845129303,
						},
						{
							check: false,
							key: "3-45",
							name: "身体45",
							per: 0.19079123138260612,
						},
						{
							check: false,
							key: "3-112",
							name: "身体112",
							per: 0.2005392407917278,
						},
						{
							check: false,
							key: "3-26",
							name: "身体26",
							per: 0.20730032001087229,
						},
						{
							check: false,
							key: "3-124",
							name: "身体124",
							per: 0.20733553968626628,
						},
						{
							check: false,
							key: "3-95",
							name: "身体95",
							per: 0.21334247700072995,
						},
						{
							check: false,
							key: "3-28",
							name: "身体28",
							per: 0.2146713112480928,
						},
						{
							check: false,
							key: "3-117",
							name: "身体117",
							per: 0.21993362906036373,
						},
						{
							check: false,
							key: "3-73",
							name: "身体73",
							per: 0.22265411840916827,
						},
						{
							check: false,
							key: "3-149",
							name: "身体149",
							per: 0.22464464919205662,
						},
						{
							check: false,
							key: "3-53",
							name: "身体53",
							per: 0.22593516202540542,
						},
						{
							check: false,
							key: "3-9",
							name: "身体9",
							per: 0.22688541239920434,
						},
						{
							check: false,
							key: "3-97",
							name: "身体97",
							per: 0.23469772521695353,
						},
						{
							check: false,
							key: "3-22",
							name: "身体22",
							per: 0.24844386720000788,
						},
						{
							check: false,
							key: "3-91",
							name: "身体91",
							per: 0.26561306395482753,
						},
						{
							check: false,
							key: "3-72",
							name: "身体72",
							per: 0.26773023190607825,
						},
						{
							check: false,
							key: "3-56",
							name: "身体56",
							per: 0.2757950580571583,
						},
						{
							check: false,
							key: "3-110",
							name: "身体110",
							per: 0.2824646900250102,
						},
						{
							check: false,
							key: "3-46",
							name: "身体46",
							per: 0.28717981115056956,
						},
						{
							check: false,
							key: "3-68",
							name: "身体68",
							per: 0.2928720107042364,
						},
						{
							check: false,
							key: "3-148",
							name: "身体148",
							per: 0.29871173010677843,
						},
						{
							check: false,
							key: "3-94",
							name: "身体94",
							per: 0.30048774257005617,
						},
						{
							check: false,
							key: "3-39",
							name: "身体39",
							per: 0.3239956775517232,
						},
						{
							check: false,
							key: "3-122",
							name: "身体122",
							per: 0.332519059772332,
						},
						{
							check: false,
							key: "3-58",
							name: "身体58",
							per: 0.33266602097513154,
						},
						{
							check: false,
							key: "3-133",
							name: "身体133",
							per: 0.3411323648409632,
						},
						{
							check: false,
							key: "3-63",
							name: "身体63",
							per: 0.34669936604812,
						},
						{
							check: false,
							key: "3-30",
							name: "身体30",
							per: 0.3670433963583243,
						},
						{
							check: false,
							key: "3-123",
							name: "身体123",
							per: 0.36824888646716536,
						},
						{
							check: false,
							key: "3-135",
							name: "身体135",
							per: 0.38368665126874446,
						},
						{
							check: false,
							key: "3-17",
							name: "身体17",
							per: 0.3934904868686525,
						},
						{
							check: false,
							key: "3-21",
							name: "身体21",
							per: 0.3948860578863713,
						},
						{
							check: false,
							key: "3-113",
							name: "身体113",
							per: 0.3955219659974858,
						},
						{
							check: false,
							key: "3-12",
							name: "身体12",
							per: 0.3962466529516221,
						},
						{
							check: false,
							key: "3-125",
							name: "身体125",
							per: 0.4004012843514091,
						},
						{
							check: false,
							key: "3-82",
							name: "身体82",
							per: 0.40888667610324947,
						},
						{
							check: false,
							key: "3-62",
							name: "身体62",
							per: 0.42832588102327473,
						},
						{
							check: false,
							key: "3-7",
							name: "身体7",
							per: 0.44910537768139414,
						},
						{
							check: false,
							key: "3-104",
							name: "身体104",
							per: 0.4580830743140124,
						},
						{
							check: false,
							key: "3-43",
							name: "身体43",
							per: 0.4621719914413016,
						},
						{
							check: false,
							key: "3-75",
							name: "身体75",
							per: 0.4635192768325832,
						},
						{
							check: false,
							key: "3-69",
							name: "身体69",
							per: 0.4783527262328413,
						},
						{
							check: false,
							key: "3-129",
							name: "身体129",
							per: 0.504298557900543,
						},
						{
							check: false,
							key: "3-23",
							name: "身体23",
							per: 0.5082527975997129,
						},
						{
							check: false,
							key: "3-51",
							name: "身体51",
							per: 0.5104193634805057,
						},
						{
							check: false,
							key: "3-3",
							name: "身体3",
							per: 0.541345859597791,
						},
						{
							check: false,
							key: "3-4",
							name: "身体4",
							per: 0.5442981471744502,
						},
						{
							check: false,
							key: "3-27",
							name: "身体27",
							per: 0.5457365866583989,
						},
						{
							check: false,
							key: "3-2",
							name: "身体2",
							per: 0.5554111527843284,
						},
						{
							check: false,
							key: "3-86",
							name: "身体86",
							per: 0.5720329990784168,
						},
						{
							check: false,
							key: "3-11",
							name: "身体11",
							per: 0.5884965540763178,
						},
						{
							check: false,
							key: "3-81",
							name: "身体81",
							per: 0.5913101202746252,
						},
						{
							check: false,
							key: "3-78",
							name: "身体78",
							per: 0.5942860464115869,
						},
						{
							check: false,
							key: "3-0",
							name: "身体0",
							per: 0.5974583440266955,
						},
						{
							check: false,
							key: "3-141",
							name: "身体141",
							per: 0.5994852721799995,
						},
						{
							check: false,
							key: "3-35",
							name: "身体35",
							per: 0.6183585713371401,
						},
						{
							check: false,
							key: "3-130",
							name: "身体130",
							per: 0.6214759647649555,
						},
						{
							check: false,
							key: "3-144",
							name: "身体144",
							per: 0.6317261262477641,
						},
						{
							check: false,
							key: "3-8",
							name: "身体8",
							per: 0.6367019212931551,
						},
						{
							check: false,
							key: "3-16",
							name: "身体16",
							per: 0.6401818696064147,
						},
						{
							check: false,
							key: "3-49",
							name: "身体49",
							per: 0.6412142651510807,
						},
						{
							check: false,
							key: "3-60",
							name: "身体60",
							per: 0.6453997082236482,
						},
						{
							check: false,
							key: "3-99",
							name: "身体99",
							per: 0.648775439431123,
						},
						{
							check: false,
							key: "3-32",
							name: "身体32",
							per: 0.6509295192999276,
						},
						{
							check: false,
							key: "3-98",
							name: "身体98",
							per: 0.6521903705937214,
						},
						{
							check: false,
							key: "3-14",
							name: "身体14",
							per: 0.6683090590235035,
						},
						{
							check: false,
							key: "3-61",
							name: "身体61",
							per: 0.6684479011954413,
						},
						{
							check: false,
							key: "3-33",
							name: "身体33",
							per: 0.6745130440188356,
						},
						{
							check: false,
							key: "3-115",
							name: "身体115",
							per: 0.6752654305067929,
						},
						{
							check: false,
							key: "3-70",
							name: "身体70",
							per: 0.6912242476953588,
						},
						{
							check: false,
							key: "3-90",
							name: "身体90",
							per: 0.6950230873485542,
						},
						{
							check: false,
							key: "3-59",
							name: "身体59",
							per: 0.700807247959015,
						},
						{
							check: false,
							key: "3-71",
							name: "身体71",
							per: 0.7026083284426584,
						},
						{
							check: false,
							key: "3-136",
							name: "身体136",
							per: 0.707820929343649,
						},
						{
							check: false,
							key: "3-65",
							name: "身体65",
							per: 0.7145772372411098,
						},
						{
							check: false,
							key: "3-52",
							name: "身体52",
							per: 0.7289130929091161,
						},
						{
							check: false,
							key: "3-57",
							name: "身体57",
							per: 0.7332018588554172,
						},
						{
							check: false,
							key: "3-143",
							name: "身体143",
							per: 0.7408029837366176,
						},
						{
							check: false,
							key: "3-83",
							name: "身体83",
							per: 0.750758156990989,
						},
						{
							check: false,
							key: "3-64",
							name: "身体64",
							per: 0.7558486779443739,
						},
						{
							check: false,
							key: "3-146",
							name: "身体146",
							per: 0.7561924676884766,
						},
						{
							check: false,
							key: "3-119",
							name: "身体119",
							per: 0.7635683991193878,
						},
						{
							check: false,
							key: "3-54",
							name: "身体54",
							per: 0.7642518253730928,
						},
						{
							check: false,
							key: "3-67",
							name: "身体67",
							per: 0.7702029809409966,
						},
						{
							check: false,
							key: "3-10",
							name: "身体10",
							per: 0.7745567647106876,
						},
						{
							check: false,
							key: "3-120",
							name: "身体120",
							per: 0.7751137969795592,
						},
						{
							check: false,
							key: "3-84",
							name: "身体84",
							per: 0.7856429450166166,
						},
						{
							check: false,
							key: "3-107",
							name: "身体107",
							per: 0.7865405145608211,
						},
						{
							check: false,
							key: "3-139",
							name: "身体139",
							per: 0.7921831073344086,
						},
						{
							check: false,
							key: "3-48",
							name: "身体48",
							per: 0.7931686403589981,
						},
						{
							check: false,
							key: "3-114",
							name: "身体114",
							per: 0.8009997570169919,
						},
						{
							check: false,
							key: "3-106",
							name: "身体106",
							per: 0.8080436011186525,
						},
						{
							check: false,
							key: "3-31",
							name: "身体31",
							per: 0.8204835468970275,
						},
						{
							check: false,
							key: "3-102",
							name: "身体102",
							per: 0.8313712350452315,
						},
						{
							check: false,
							key: "3-92",
							name: "身体92",
							per: 0.8434543226857864,
						},
						{
							check: false,
							key: "3-37",
							name: "身体37",
							per: 0.8483540926615539,
						},
						{
							check: false,
							key: "3-5",
							name: "身体5",
							per: 0.8493962394078198,
						},
						{
							check: false,
							key: "3-147",
							name: "身体147",
							per: 0.8610247105296993,
						},
						{
							check: false,
							key: "3-126",
							name: "身体126",
							per: 0.8630751676176553,
						},
						{
							check: false,
							key: "3-89",
							name: "身体89",
							per: 0.8899411511324357,
						},
						{
							check: false,
							key: "3-103",
							name: "身体103",
							per: 0.893154299345771,
						},
						{
							check: false,
							key: "3-116",
							name: "身体116",
							per: 0.9032458300182306,
						},
						{
							check: false,
							key: "3-128",
							name: "身体128",
							per: 0.9189765496685993,
						},
						{
							check: false,
							key: "3-105",
							name: "身体105",
							per: 0.9234146872466376,
						},
						{
							check: false,
							key: "3-111",
							name: "身体111",
							per: 0.9246045488919735,
						},
						{
							check: false,
							key: "3-29",
							name: "身体29",
							per: 0.9384885894127252,
						},
						{
							check: false,
							key: "3-47",
							name: "身体47",
							per: 0.9431443988430482,
						},
						{
							check: false,
							key: "3-93",
							name: "身体93",
							per: 0.9504881950678336,
						},
						{
							check: false,
							key: "3-34",
							name: "身体34",
							per: 0.9545176480518709,
						},
						{
							check: false,
							key: "3-131",
							name: "身体131",
							per: 0.957390213708426,
						},
						{
							check: false,
							key: "3-121",
							name: "身体121",
							per: 0.9641257521915875,
						},
						{
							check: false,
							key: "3-41",
							name: "身体41",
							per: 0.9691981579085781,
						},
						{
							check: false,
							key: "3-13",
							name: "身体13",
							per: 0.9711406685609798,
						},
						{
							check: false,
							key: "3-20",
							name: "身体20",
							per: 0.9775619295057306,
						},
						{
							check: false,
							key: "3-87",
							name: "身体87",
							per: 0.9777968100373434,
						},
						{
							check: false,
							key: "3-118",
							name: "身体118",
							per: 0.9834748503860096,
						},
						{
							check: false,
							key: "3-108",
							name: "身体108",
							per: 0.9972185644290174,
						},
						{
							check: false,
							key: "3-1",
							name: "身体1",
							per: 0.9996045707193307,
						},
					],
				},
			];
		},

		dealWithData() {
			this.selected = this.data;
			this.$nextTick(() => this.changeSelectStatus(true));
		},
		maskClick() {
			this.$emit("input", false);
		},

		changeSelectStatus(status) {
			if (!this.selected.length) return;
			this.selected.forEach((key) => {
				// parent self
				const [p] = key.split("-");
				const parent = this.list[p - 1];
				const child = parent.nfts.find(item => item.key === key);
				console.log('child', child);

				child.check = !!status;
			});
		},

		handleCheckGroup(event) {
			const values = event.detail.value;
			console.log('values', values);

			this.selected = values;
			this.changeSelectStatus(true);
		},

		clearSelection() {
			this.changeSelectStatus(false);
			this.selected = [];
		},

		emitSelection() {
			this.$emit("selection", this.selected);
			this.maskClick();
		},
	},
};
</script>
<style lang="scss" scoped>
.selection_wrap {
	width: 100vw;
	height: 80vh;
	background-color: #fff;

	border-radius: 20rpx 20rpx 0 0;

	.header {
		width: 100%;
		height: 136rpx;
		border-bottom: 4rpx solid #eeeeee;

		display: flex;
		justify-content: center;
		align-items: center;

		color: black;
		font-size: 40rpx;
		text-align: center;
		font-weight: bold;
	}

	.selection_main {
		width: 100%;
		height: calc(100% - 136rpx - 40rpx - 100rpx - 40rpx);
		margin-bottom: 40rpx;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			text:nth-child(1) {
				font-size: 36rpx;
				font-weight: bold;
				color: black;
			}

			text:nth-child(2) {
				margin-right: 30rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #999999;
			}
		}

		::v-deep .u-collapse-item__content__text {
			padding: 0;
		}

		.item {
			width: 100%;
			height: 104rpx;
			padding: 0 40rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			color: black;
			font-weight: bold;
			font-size: 32rpx;
			.per {
				font-weight: normal;
				margin-left: auto;
				font-size: 28rpx;
			}
		}
		.item_scroll {
			width: 100%;
			max-height: 400rpx;
		}
	}

	.operation {
		width: 100%;
		height: 100rpx;
		padding: 40rpx;
		padding-top: 0;

		display: flex;
		justify-content: space-between;
		align-items: center;

		view {
			width: 320rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 40rpx;
			font-weight: bold;
			text-align: center;
			color: white;
			border-radius: 30rpx;
		}

		.clear {
			background: #cccccc;

			&.selected {
				background: rgba(25, 81, 248, 0.8);
			}
		}
		.select {
			background: #1952f8;

			display: flex;
			justify-content: center;
			align-items: center;

			.tag {
				margin-left: 8rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				background-color: white;

				text-align: center;
				font-size: 24rpx;
				font-weight: bold;
				color: rgb(25, 81, 248);
			}
		}
	}
}
</style>
